import React, { Component } from 'react'
import { Select } from 'antd'
import { getChannels } from 'api/channels'

const { Option } = Select

class ChannelList extends Component {
  state = {
    channelList: [],
  }
  render() {
    return (
      <Select
        style={{ width: 200 }}
        placeholder='请选择频道'
        value={this.props.value}
        onChange={this.props.onChange}
      >
        {this.state.channelList.map((item) => {
          return (
            <Option
              value={item.id}
              key={item.id}
            >
              {item.name}
            </Option>
          )
        })}
      </Select>
    )
  }
  componentDidMount() {
    this.getChannelList()
  }
  async getChannelList() {
    const { data } = await getChannels()
    this.setState({
      channelList: data.channels,
    })
  }
}

export default ChannelList
